<template>
  <!-- 登录页 -->
  <div class="login-container" v-show="isLogin">
    <!-- 登录模态框 -->
    <div class="login-model">
      <p class="login-txt">登录<span class="close-login" @click="closeLogin">X</span></p>
      <!-- 网易云App扫码登录面板 -->
      <ErWeiMa v-if="isLoginType === 'Qr'"></ErWeiMa>
      <OtherLogin v-else-if="isLoginType === 'Other'"></OtherLogin>
      <PhoneLogin v-else-if="isLoginType === 'shortMsg'"></PhoneLogin>
      <PwdLogin v-else-if="isLoginType === 'Password'"></PwdLogin>
      <Register v-else-if="isLoginType === 'Register'"></Register>
    </div>
  </div>
</template>
<script>
import ErWeiMa from '@/components/Login/ErWeiMa.vue'
import OtherLogin from '@/components/Login/OtherLogin.vue'
import PhoneLogin from '@/components/Login/PhoneLogin.vue'
import PwdLogin from '@/components/Login/PwdLogin.vue'
import Register from '@/components/Login/Register.vue'
export default {
  name: 'login',
  data() {
    return {}
  },
  computed: {
    // 控制登录模态框的 v-show
    isLogin() {
      return this.$store.state.isLogin
    },
    isLoginType() {
      return this.$store.state.isLoginType
    }
  },
  methods: {
    // 关闭登陆模态框
    closeLogin() {
      this.$store.commit('ToggleLogin')
      this.$router.push('/recommend')
    }
  },
  components: {
    ErWeiMa,
    OtherLogin,
    PhoneLogin,
    PwdLogin,
    Register
  }
}
</script>

<style lang="less" scoped>
@import '../assets/base.less';
.login-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  .login-model {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 500px;
    height: 350px;
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 0 5px 16px rgb(0, 0, 0, 0.8);
    overflow: hidden;
    .login-txt {
      background-color: @black;
      line-height: 35px;
      color: #fff;
      text-indent: 1em;
      span {
        float: right;
        margin-right: 12px;
        cursor: pointer;
      }
    }
  }
}
</style>